.q-calendar-weekly
  display: flex
  flex: 1
  flex-wrap: nowrap
  flex-direction: column
  width: 100%

  &__head
    position: relative
    display: flex
    flex-wrap: nowrap
    flex: 1 0 0%

    &--wrapper
      position: relative
      display: flex
      flex-wrap: nowrap
      flex: 1 0 0%
      min-width: 100%
      max-width: 100%

    &-workweek
      display: flex
      flex-wrap: nowrap
      user-select: none
      padding: 0 4px
      font-size: 1rem
      justify-content: center
      align-items: center

    &-weekdays
      position: relative
      display: flex
      flex-wrap: nowrap
      flex: 1 0 0%
      padding: 0
      font-size: 1rem
      width: 100%

    &-weekday
      display: flex
      flex-wrap: nowrap
      flex: 1
      user-select: none
      padding: 0 4px
      font-size: 1rem
      justify-content: center

  &__week
    position: relative
    display: flex
    flex-wrap: nowrap
    flex: 10000 1 0%
    min-height: 5em

    &--wrapper
      position: relative
      display: flex
      flex-wrap: nowrap
      flex: 10000 1 0%
      overflow: hidden
      min-width: 100%
      transition: height 0.3s

    &-days
      position: relative
      height: 100%
      display: flex
      flex: 1 0 auto
      flex-wrap: nowrap
      min-width: 100%
      width: 100%

    &-events
      position: absolute
      margin-top: 28px
      width: 100%
      overflow: hidden

  &__workweek
    display: flex
    flex-wrap: nowrap
    user-select: none
    padding: 0
    align-items: center
    justify-content: center

  &__day
    position: relative
    display: flex
    flex: 1
    overflow: hidden
    user-select: none

    &--content
      position: relative
      margin-top: 28px
      height: 100%

  &__day-label
    position: absolute
    text-decoration: none
    user-select: none
    left: 2px
    top: 2px

  &__day-month
    position: absolute
    text-decoration: none
    user-select: none
    max-width: 80%
    top: 3px
    right: 2px
    left: 2px
    margin-left: 28px
    text-align: right

  &__day-month--day-of-year
    position: absolute
    text-decoration: none
    user-select: none
    box-shadow: none
    top: 2px
    right: 2px
    font-size: 0.6rem

// coloring and other vars
.q-calendar-weekly

  &__head-workweek
    border-right: var(--calendar-border)
    border-bottom: var(--calendar-border)
    max-width: var(--calendar-work-week-width)
    min-width: var(--calendar-work-week-width)

  &__head-weekday
    border-right: var(--calendar-border)
    border-bottom: var(--calendar-border)
    font-weight: var(--calendar-head-font-weight)

    &:last-child
      border-right: none !important

    &.q-disabled-day
      color: var(--calendar-disabled-date-color)
      background: var(--calendar-disabled-date-background) !important

  &__workweek
    font-size: var(--calendar-work-week-font-size)
    border-right: var(--calendar-border)
    max-width: var(--calendar-work-week-width)
    min-width: var(--calendar-work-week-width)

    &.q-current-day
      color: var(--calendar-current-color)

  &__week--wrapper
    border-bottom: var(--calendar-border)

    &:last-child
      border-bottom: none !important

  &__day
    border-right: var(--calendar-border)

    &:last-child
      border-right: none !important

    &.q-active-date
      color: var(--calendar-active-date-color)

      .q-btn__wrapper:before
        background: var(--calendar-active-date-background)

    &.q-current-day
      color: var(--calendar-current-color) !important
      background: var(--calendar-current-background)

      .q-btn__wrapper:before
        border: var(--calendar-border-current)
        background: var(--calendar-current-background)

    &.q-disabled-day
      color: var(--calendar-disabled-date-color)
      background: var(--calendar-disabled-date-background) !important

    &.q-outside
      color: var(--calendar-outside-color) !important
      background: var(--calendar-outside-background)

    &.q-selected
      color: var(--calendar-selected-color)
      background: var(--calendar-selected-background)

      .q-current-day
        .q-btn__wrapper:before
          // inverted
          border: var(--calendar-border-current-dark) !important

    &.q-range-first,
    &.q-range-last,
    &.q-range
      color: var(--calendar-range-color)
      background: var(--calendar-range-background)

      .q-current-day
        .q-btn__wrapper:before
          // inverted
          border: var(--calendar-border-current-dark) !important

    &.q-calendar-weekly__day--droppable
      border: var(--calendar-border-droppable) !important

.q-dark div,
.body--dark div,
.q-calendar--dark

  .q-calendar-weekly

    &__head-workweek
      border-right: var(--calendar-border-dark)
      border-bottom: var(--calendar-border-dark)

    &__head-weekday
      border-right: var(--calendar-border-dark)
      border-bottom: var(--calendar-border-dark)

      &:last-child
        border-right: none !important

      &.q-disabled-day
        color: var(--calendar-disabled-date-color-dark)
        background: var(--calendar-disabled-date-background-dark) !important

    &__workweek
      border-right: var(--calendar-border-dark)

      &.q-current-day
        color: var(--calendar-current-color-dark)

    &__week--wrapper
      border-bottom: var(--calendar-border-dark)

      &:last-child
        border-bottom: none !important

    &__day
      border-right: var(--calendar-border-dark)

      &:last-child
        border-right: none !important

      &.q-active-date
        color: var(--calendar-active-date-color-dark) !important

        .q-btn__wrapper:before
          background: var(--calendar-active-date-background-dark)

      &.q-current-day
        color: var(--calendar-current-color-dark) !important
        background: var(--calendar-current-background-dark)

        .q-btn__wrapper:before
          border: var(--calendar-border-current-dark) !important
          background: var(--calendar-current-background-dark)

      &.q-disabled-day
        color: var(--calendar-disabled-date-color-dark)
        background: var(--calendar-disabled-date-background-dark) !important

      &.q-outside
        color: var(--calendar-outside-color-dark) !important
        background: var(--calendar-outside-background-dark)

      &.q-selected
        color: var(--calendar-selected-color-dark)
        background: var(--calendar-selected-background-dark)

        .q-current-day
          .q-btn__wrapper:before
            border: var(--calendar-border-current) !important

      &.q-range-first,
      &.q-range-last,
      &.q-range
        color: var(--calendar-range-color-dark)
        background: var(--calendar-range-background-dark)

        .q-current-day
          .q-btn__wrapper:before
            // inverted
            border: var(--calendar-border-current) !important

      &.q-calendar-weekly__day--droppable
        border: var(--calendar-border-droppable-dark) !important

.q-day-event
  &:first-child
    margin-top: 0.0em
